<template>
  <div>
    <el-card :bordered="false" dis-hover class="ivu-mt ivu-mb-16">
      <el-form
        ref="thisForm"
        :model="thisForm"
        label-width="75px"
        label-position="right"
        inline
        @submit.native.prevent
      >
        <el-form-item label="关键字:">
          <el-input
            v-model="thisForm.keywords"
            placeholder="请输入当面付订单号/服务订单号"
            class="form-content-width"
            clearable
          >
            <el-button slot="append" type="primary" @click="onSearch">搜索</el-button>
          </el-input>
        </el-form-item>

        <el-form-item label="状态:">
          <el-select
            v-model="thisForm.status"
            placeholder="请选择订单状态"
            clearable
            @change="onSearch"
          >
            <el-option :value="-1" label="已取消">已取消</el-option>
            <el-option :value="10" label="待支付">待支付</el-option>
            <el-option :value="20" label="已支付">已支付</el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="支付时间:">
          <el-date-picker
            @change="onchangeTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="timeVal"
            format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="mr20"
            :picker-options="options"
          ></el-date-picker>
        </el-form-item>
      </el-form>
    </el-card>
    <el-table
      :data="orderList"
      ref="table"
      class="mt25"
      no-userFrom-text="暂无数据"
      no-filtered-userFrom-text="暂无筛选结果"
    >
      <el-table-column label="Id" min-width="80" align="center" #default="{row}">{{row.id}}</el-table-column>
      <el-table-column label="订单号" min-width="120" #default="{row}">
        <div>订单号:{{row.ordersn}}</div>
        <div>服务单号:{{row.serviceOrdersn}}</div>
      </el-table-column>
      <el-table-column label="订单信息" #default="{row}" min-width="120">
        <div>服务人员:{{row.staffName}}</div>
        <div>收费内容:{{row.serviceContent}}</div>
      </el-table-column>
      <el-table-column label="状态" #default="{row}">
        <el-tag v-if="row.status == -1" type="danger">已取消</el-tag>
        <el-tag v-if="row.status == 10" type="warning">待支付</el-tag>
        <el-tag v-if="row.status == 20" type="success">已支付</el-tag>
      </el-table-column>
      <el-table-column label="相关金额" min-width #default="{row}">
        <div>支付金额：{{row.payPrice}}</div>
        <div v-if="row.service_fee > 0">分佣金额：{{row.serviceFee}}</div>
        <div>分佣比例：{{row.serviceRate}}%</div>
      </el-table-column>
      <el-table-column #default="{row}" label="操作时间" min-width="120">
        <div>创建时间：{{row.addTimeDesc}}</div>
        <div v-if="row.status == 20">支付时间：{{row.payTimeDesc}}</div>
      </el-table-column>

      <el-table-column #default="{row}" label="收费凭据">
        <el-image
          style="width: 100px; height: 100px"
          :src="row.serviceImgsArray[0]"
          :preview-src-list="row.serviceImgsArray"
          v-if="row.serviceImgsArray.length > 0"
        ></el-image>
      </el-table-column>
    </el-table>
    <div class="acea-row row-right page">
      <el-pagination
        :total="total"
        show-elevator
        show-total
        :current-page="thisForm.page"
        @current-change="pageChange"
        :page-size="thisForm.limit"
      />
    </div>
  </div>
</template>

<script>
import { getSubOrderListApi } from '@/api/onsite';
export default {
  data() {
    return {
      thisForm: {
        keywords: '',
        time: '',
        status: '',
        limit: 10,
        page: 1,
      },
      total: 0,
      orderList: [],
      options: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()));
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '昨天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(
                start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 1)),
              );
              end.setTime(end.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())));
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近7天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(
                start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 6)),
              );
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '最近30天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(
                start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 29)),
              );
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '本月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.setTime(new Date(new Date().getFullYear(), new Date().getMonth(), 1)));
              picker.$emit('pick', [start, end]);
            },
          },
          {
            text: '本年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.setTime(new Date(new Date().getFullYear(), 0, 1)));
              picker.$emit('pick', [start, end]);
            },
          },
        ],
      },
      timeVal: [],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    show(type) {
      let viewer = this.$el.querySelector('.' + type).$viewer;
      viewer.show();
    },
    //修改支付时间
    onchangeTime(e) {
      this.timeVal = e;

      if (e) {
        this.thisForm.time = this.timeVal[0] ? this.timeVal.join('_') : '';
      } else {
        this.thisForm.time = '';
      }
      // console.log(e)
      console.log(this.thisForm, 'thisForm');

      // return ;
      this.onSearch();
    },
    onSearch() {
      this.thisForm.page = 1;
      this.getList();
    },

    //获取订单列表
    getList() {
      getSubOrderListApi(this.thisForm).then((res) => {
        this.orderList = res.list;
        this.total = res.total;
      });
    },
    pageChange(e) {
      this.thisForm.page = index;
      this.getList();
    },
  },
};
</script>

<style scoped>
.form-content-width {
  width: '200px';
}
.tabBox_img {
  display: flex;
}
</style>